跳到主要内容

Unity UGUI学习 常用的组件

Image​

使用这个 Set Native Size 可以设置 UI 大小为选中的 UI 长宽比

编辑窗口按 T 后，按住 Shift 能等比例缩放图片

OnClick​

可以不编写代码就关闭某个物体，如下图所示，这个 OnClick 内置了很多事件，直接选中对应功能就能用了，例如这里的 SetActive

Grid Layout Group​

这个 Grid Layout Group 组件可以快速的排列单元格

排序的效果如下：

Layout Element​

如果要 覆盖布局元素 的最小大小、偏好大小或灵活大小，可通过向游戏对象添加 Layout Element 组件来实现

布局控制器按以下顺序为布局元素分配宽度或高度：

首先，布局控制器将分配最小大小属性（Min Width、Min Height）。 如果有足够的可用空间，布局控制器将分配偏好大小属性（Preferred Width、Preferred Height）。 如果有额外的可用空间，布局控制器将分配灵活大小属性（Flexible Width、Flexible Height）。

举例：背包 Item 移动时的案例

垂直布局组 (Vertical Layout Group)​

垂直布局组组件将子布局元素纵向放置。子布局元素的高度根据以下规则由各自的最小高度、偏好高度和灵活高度决定：

  • 所有子布局元素的最小高度相加，并加上它们之间的间距。得到的结果便是垂直布局组的最小高度。
  • 所有子布局元素的偏好高度相加，并加上它们之间的间距。得到的结果便是垂直布局组的偏好高度。
  • 如果垂直布局组处于其最小高度或更小值，则所有子布局元素也将具有最小高度。
  • 垂直布局组越接近其偏好高度，每个子布局元素也越接近偏好高度。
  • 如果垂直布局组高度大于其偏好高度，则会根据各子布局元素的灵活高度按比例为子布局元素分配额外的可用空间。

TextUI 和 TextMesh的区别​

TextUI 和 TextMesh 是有区别的，前者需要画布渲染器，后者无需画布渲染器，它自己就包含了一个渲染器（面片渲染器）

它本质就是一个 Mesh（Text UI 也是 Mesh）

它们两者的区别在于 UI采用的是 RectTransform 组件坐标，TextMesh 采用的是 Transform坐标，因此可以直接像普通 GameObject 那样直接显示在世界坐标上面

TextMesh Pro​

TextMesh Pro是 Unity中文字渲染的终极解决方案，原本是一个第三方插件，后被 Unity收购后并入 Unity，现在可以免费使用。

v2-27cbff8131fe5f9a316f980abe65bdb9_b.gif

如果要添加字体，需要先创建生成这个字体文件

如果是中文字体需要设置一下（具体看其它教程），设置完成后点击 Generate Font Atlas

// 使用这个 TMPro 库
using TMPro;

...
// 然后通过这个类来承接这个组件

public TextMeshProUGUI text;

Canvas Group​

Canvas Group可以影响该组 UI 元素的部分性质，而不需要费力的对该组UI下的每个元素进行逐一得得调整。Canvas Group 是同时作用于该组件 UI 下的全部元素。

参数：

Alpha : 该组 UI 元素的透明度。注：每个UI最终的透明度是由此值和自身的alpha数值相乘得到。

Interactable : 是否需要交互（勾选的则是可交互），同时作用于该组全部 UI 元素。

Blocks Raycasts : 如果需要图形射线（GraphicRaycaster）检测。勾选后，可将此组件作为一个射线碰撞盒 （注：不适用于 Physics.Raycast）

Ignore Parent Group : 是否需要忽略父级对象中的 CanvasGroup 的设置。（勾选则忽略）

获取 UI 下面的信息​

通过设置 Blocks Raycasts 为 false（注意，一开始不能设置为 false 否则会无法拖拽当前 UI），可以使 UI 不阻挡鼠标的射线，就是让射线直接先透过这个 UI，但是却能检测到当前 UI 下面的那个物品

public class ItemOnDrag : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler
{
    /// <summary>
    /// 开始拖拽时
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        // 因为 UI 默认的渲染顺序是从上往下渲染，所以下面的 UI 会挡住上面的 UI
        // 这里将其丢到父级（会自动放在父级的最下面）从而使之不会被挡住
        transform.SetParent(transform.parent.parent);

        // 当前 UI 组件为鼠标的位置
        transform.position = eventData.position;
        // 开始拖拽时关闭 UI 的射线检查
        GetComponent<CanvasGroup>().blocksRaycasts = false;
    }

    /// <summary>
    /// 正在拖拽
    /// </summary>
    /// <param name="eventData"></param>
    public void OnDrag(PointerEventData eventData)
    {
        transform.position = eventData.position;
        // 输出正在拖拽物品时正下方物品的名字
        Debug.Log(eventData.pointerCurrentRaycast.gameObject.name);
    }

    /// <summary>
    /// 结束拖拽
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        // 结束拖拽时恢复 UI 的射线检查
        GetComponent<CanvasGroup>().blocksRaycasts = true;
    }
}

如下，这样就能拖拽这个 UI 并检测到下面的物品了